<template>
  <el-header class="navbar" height="auto">
    <el-button
      type="text"
      class="hamburger"
      :icon="sidebar.collapse? 'el-icon-s-unfold':'el-icon-s-fold'"
      @click="toggleCollapse">
    </el-button>
    <el-breadcrumb separator="/" replace>
      <el-breadcrumb-item :to="{path:'Home'}">Home</el-breadcrumb-item>
      <el-breadcrumb-item 
      v-for="item in navbar.breadcrumbs"
      :key="item.name"
      :to="item">{{item.text || item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-header>
</template>

<script>
import {mapGetters,mapActions} from "vuex";
export default {
 computed:{
   ...mapGetters(["sidebar","navbar"])
 },
 methods:
 {
   ...mapActions({
     toggleCollapse:"toggleSidebarCollapse"
   })
   
 }
}
</script>

<style>
   .navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 !important;
  background-color: #fff;
}

.navbar .hamburger {
  margin-right: 10px;
  padding: 15px;
  font-size: 20px;
  border: 0;
  border-radius: 0;
}

.navbar .hamburger:hover {
  background-color: rgba(0, 0, 0, 0.1);
}


</style>